<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>10班随机点名器</title>
    <style>
      body {
        font-family: "微软雅黑", Arial, sans-serif;
        background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
        text-align: center;
        padding-top: 60px;
      }
      #container {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 4px 24px #b0c4de55;
        display: inline-block;
        padding: 48px 70px;
      }
      #namesArea {
        margin: 36px 0 24px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
      }
      .nameTag {
        display: inline-flex;
        align-items: center;
        padding: 14px 26px 14px 30px;
        background: linear-gradient(120deg, #e3f2fd 60%, #f5fafd 100%);
        border-radius: 24px;
        font-size: 1.18em;
        box-shadow: 0 2px 8px #b0c4de33;
        min-width: 70px;
        position: relative;
        transition: box-shadow 0.2s, background 0.2s;
        border: 1.5px solid #e0eafc;
      }
      .nameTag.highlight {
        background: linear-gradient(120deg, #2196f3 60%, #64b5f6 100%);
        color: #fff;
        font-weight: bold;
        box-shadow: 0 0 16px #2196f3cc;
        border: 1.5px solid #2196f3;
      }
      .nameTag .delBtn {
        margin-left: 14px;
        background: #f44336;
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 26px;
        height: 26px;
        font-size: 1.1em;
        line-height: 26px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: 0 2px 6px #f4433622;
        transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
      }
      .nameTag .delBtn:hover {
        background: #d32f2f;
        transform: scale(1.18);
        box-shadow: 0 4px 12px #f4433644;
      }
      #result {
        font-size: 1.5em;
        color: #2196f3;
        margin: 24px 0 0 0;
        letter-spacing: 2px;
      }
      button {
        font-size: 1.1em;
        padding: 10px 32px;
        /* margin: 12px 10px 0 10px; */
        border-radius: 8px;
        border: none;
        background: linear-gradient(90deg, #2196f3 60%, #64b5f6 100%);
        color: #fff;
        cursor: pointer;
        box-shadow: 0 2px 8px #b0c4de33;
        transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
      }
      button:disabled {
        background: #90caf9;
        cursor: not-allowed;
        box-shadow: none;
      }
      button:hover:enabled {
        background: linear-gradient(90deg, #1976d2 60%, #42a5f5 100%);
        transform: translateY(-2px) scale(1.04);
        box-shadow: 0 4px 16px #2196f344;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h2>急宣内阁学士即刻起立议政</h2>
      <div id="namesArea"></div>
      <button id="pickBtn" onclick="pickName()">点名！</button>
      <button id="resetBtn" onclick="resetNames()">重置名单</button>
      <div id="result"></div>
    </div>
    <script>
      // 名单直接写在这里
      const initialNames = [
        "柏丽娜",
        "陈浩东",
        "崔子涵",
        "何佳绮",
        "何来桂",
        "何山海",
        "何欣怡",
        "何雨婷",
        "何玉琴",
        "何玉溪",
        "何子轩",
        "胡雨佳",
        "蒋艾谚",
        "蒋鸿博",
        "蒋睿杰",
        "蒋思美",
        "李建宇",
        "李沁晓",
        "李泽峻",
        "梁贤武",
        "刘静",
        "骆辰希",
        "马硕",
        "毛仁泽",
        "欧阳令辉",
        "秦朗",
        "唐昊东",
        "唐旭辉",
        "王宝珍",
        "王桂英",
        "王海炼",
        "王嫚涵",
        "吴子轩",
        "熊国强",
        "杨思芝",
        "杨子熙",
        "叶先毅",
        "易瑞",
        "余花花",
        "张英涛",
        "张钰杰",
        "赵澜希",
        "郑明琪",
        "朱泓睿"
      ];
      let names = [...initialNames];
      let currentHighlight = -1;
      let rolling = false;

      function renderNames(highlightIdx = -1) {
        const area = document.getElementById("namesArea");
        area.innerHTML = "";
        names.forEach((name, idx) => {
          const tag = document.createElement("span");
          tag.className =
            "nameTag" + (idx === highlightIdx ? " highlight" : "");
          tag.innerText = name;

          // 删除按钮
          const delBtn = document.createElement("button");
          delBtn.innerText = "×";
          delBtn.className = "delBtn";
          delBtn.title = "删除";
          delBtn.onclick = function (e) {
            e.stopPropagation();
            deleteName(idx);
          };
          tag.appendChild(delBtn);

          area.appendChild(tag);
        });
      }

      function deleteName(idx) {
        names.splice(idx, 1);
        renderNames();
        document.getElementById("result").innerText = "";
      }

      function resetNames() {
        names = [...initialNames];
        currentHighlight = -1;
        renderNames();
        document.getElementById("result").innerText = "";
      }

      function pickName() {
        if (rolling) return;
        if (names.length === 0) {
          document.getElementById("result").innerText = "名单为空！";
          return;
        }
        rolling = true;
        document.getElementById("pickBtn").disabled = true;
        document.getElementById("result").innerText = "";
        let totalRounds = Math.floor(Math.random() * 2) + 3; // 3~4圈
        let steps =
          totalRounds * names.length + Math.floor(Math.random() * names.length);
        let delay = 60;
        let i = 0;

        function roll() {
          currentHighlight = (currentHighlight + 1) % names.length;
          renderNames(currentHighlight);
          i++;
          if (i < steps) {
            // 逐渐减慢
            if (steps - i < 10) delay += 30;
            setTimeout(roll, delay);
          } else {
            rolling = false;
            document.getElementById("pickBtn").disabled = false;
            document.getElementById(
              "result"
            ).innerText = `被点到的是：${names[currentHighlight]}`;
          }
        }
        roll();
      }

      // 页面加载时显示所有名字
      window.onload = function () {
        renderNames();
      };
    </script>
  </body>
</html>
